<template>
	<div class="rememberOilRecord">
		<x-header title="加油记录" :left-options="{backText:''}" class="whiteHeader">
			<div slot="right" @click="" style="font-size:.3rem;color:#666;">
				<group>
			       <popup-picker :data="allLicence" v-model="value1" @on-change="onChange(value1)"></popup-picker>
			     </group>
			</div>
		</x-header>
		<scroller :on-infinite="infinites" ref='myScroller' class='myScroller'>
		<div class="oilAllRecord" v-if="allData.length!=0">
			<div class="firstRecord" v-for="(items,index) in allData">
				<!-- 年份 -->
				<div class="oilYearRecord">
					<div class="oilYearLeft">
						<p>{{items.YEAR}}</p>
						<p>加油￥{{items.TOTALFEE}}</p>
					</div>
					<!-- <datetime v-model="dateValue" @on-change="changeYear" :max-year="maxYear" format="YYYY" placeholder="" >
						<div class="oilYearRight" v-if="index==0">
							<img src="../../assets/image/rememberOil/flex.png" alt="">
						</div>
						<div class="oilYearRight" v-else style="display:none;">

						</div>
					</datetime> -->
				</div>
				<!-- 每月的详细数据 -->
				<!-- 滑动删除 -->
				<div class="dateDetailRecord" v-for="item in items.FUEL_MANAGER_LIST">
						<swipeout class="vux-1px-tb">
					      <swipeout-item transition-mode="follow">
					        <div slot="right-menu">
					          <swipeout-button type="warn" @click.native="recordDel(item.FUEL_MANAGER_ID)">
					          	<img class="delPng" src="../../assets/image/collectDel.png" alt="" />
					          </swipeout-button>
					        </div>
					        <div slot="content" class="contents">
								<div class="detailRecordLeft">
									<p style="text-align:left;">{{item.WRITE_TIME | filterTime5 | formats}}</p>
									<p><img src="../../assets/image/rememberOil/mileage.png" alt="">{{item.MILEAGE}}km</p>
								</div>
								<div class="detailRecordRight">
									+{{item.PRICE}}
								</div>
							</div>
					      </swipeout-item>
				    	</swipeout>
				</div>
			</div>
		</div>
		<div v-if="noData"  class="noRecord" :style="{top:H+'rem'}">
			<img src="../../assets/image/rememberOil/noRecord.png" alt="">
			<p>{{noDataText}}</p>
		</div>
		</scroller>
	</div>
</template>
<script>
	/*加油记录*/
	import {setCookie,getCookie} from '../../util/commonUtils';
    import { XHeader,Datetime,Swipeout,SwipeoutItem,SwipeoutButton,PopupPicker,Group } from "vux"
	export default {
		name: "rememberOilRecord",
		// 数据
		data() {
			return {
				userId: '',
				allData:[],//所有数据
				detailData:[],//
				dateValue:'',//时间值
				maxYear:0,//最大年份
				page:1,//页数
				noData:false,//无数据
				noDataText:'',//无数据时的文字说明
				complete:false,//加载完成
				H:'',
				allCar:'',//所有车辆
				allLicence:[],//所有车牌号
				carValue:'',//选中车牌号
				value1: [],//数组车牌号，组件要求
			}
		},
		// 计算属性
		computed: {

		},
		// 创建（实例创建完成）
		created() {
			this.userId = getCookie('loginkey');
			this.carValue = this.$route.params.id;
			this.H = window.innerHeight/100-3.3;
			let dd = new Date();
			this.maxYear = dd.getFullYear();
			this.userId = getCookie('loginkey');
			//获取用户所有车辆
		    this.$fetchGet('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
		        if(res.STATUS_CODE==1){
		          	this.allCar=res.CARS;
					let str = '';
					for(let i=0;i<this.allCar.length;i++){
						str += this.allCar[i].LICENCE + ',';
						if(this.allCar[i].IS_DEFAULT_CAR == 1){//默认车辆
							this.value1 = [this.allCar[i].LICENCE];
						}
					}
					str = str.substring(0,str.length-1);
					this.allLicence = [str.split(',')];
					//从我的跳转过来的
					if(localStorage.getItem('carNum')){
						this.value1 = [localStorage.getItem('carNum')];
						this.carValue = localStorage.getItem('carNum');
						return ;
					}
					this.value1 = [str.split(',')[0]];
					this.carValue = str.split(',')[0];
		        }
		    },err=>{
		      console.log(err);
		    })
		},
		// el被创建，并挂载到实例上
		mounted() {

		},
		// 方法（实例中的方法）-----------
		methods: {
			//改变年份
			changeYear(){
				this.allData = [];
				this.getInfinites();
			},
			//删除
			recordDel(id){
				let obj = {};
				obj.FUEL_MANAGER_ID = id;
				//删除记录
				this.$fetchPost('/FuelManager/deleteFuelManager',obj).then(
					res => {
						if(res.STATUS_CODE == 1){
							let obj = {};
							obj.USER_ID = this.userId;
							obj.CAR_NUMBER = this.carValue;
							obj.PAGE_NO = this.page;
							obj.YEAR = '';
							obj.ORDER_BY = 1;//滑动顺序；1 - 上划 0 - 下划
							obj.PAGE_SIZE = 10;
							//加油记录
							this.$fetchPost('/FuelManager/getFuelManagerList',obj).then(
								res => {
									if(res.STATUS_CODE == 1){
										if(res.RESULT_DATA.length==0){
											this.noData = true;
											this.noDataText = '该车暂无加油记录';
										}
										this.allData = res.RESULT_DATA;
									}
								}, err => console.log(err)
							);
						}
					}, err => console.log(err)
				);
			},
			//加载
			infinites() {
				if(this.page==1){
					this.getInfinites();
				}else{
					this.getMoreInfinites();
				}
            },
            //加载第一次
            getInfinites(){
            	this.$vux.loading.show({text: '加载中'});
            	let obj = {};
				obj.USER_ID = this.userId;
				obj.CAR_NUMBER = this.carValue;
				obj.PAGE_NO = this.page;
				obj.YEAR = this.dateValue;
				obj.ORDER_BY = 1;//滑动顺序；1 - 上划 0 - 下划
				obj.PAGE_SIZE = 10;
				//加油记录
				this.$fetchPost('/FuelManager/getFuelManagerList',obj).then(
					res => {
						if(res.STATUS_CODE == 1){
							this.$vux.loading.hide();
							if(res.RESULT_DATA.length==0){
								this.$refs.myScroller.finishInfinite(2);
								this.noData = true;
								this.noDataText = '该车暂无加油记录';
							}else if(res.RESULT_DATA.length<10){
								this.$refs.myScroller.finishInfinite(2);
								this.allData = res.RESULT_DATA;
							}
						}
					}, err => console.log(err)
				);
            },
            //加载更多
            getMoreInfinites(){

            },
            //选车牌
			onChange(val){
				this.allData = [];
				this.noData = false;
				this.carValue = val.join();
				this.infinites();
			},
		},
		//过滤器
		filters:{
			//时间戳格式化--
			filterTime5(val){
		  	  let m=new Date(val).getMonth()+1>=10?new Date(val).getMonth()+1:'0'+(new Date(val).getMonth()+1);
		  	  let d=new Date(val).getDate()>=10?new Date(val).getDate():'0'+new Date(val).getDate();
		  	  return m+'-'+d;
			},
			//时间格式转换 01-12转为01月12日
			formats(val){
				if(val == ''||val == null){
					return '';
				}
				if(val.match('-')){
					let arr = val.split('-');
					return arr[0]+'月'+arr[1]+'日';
				}else{
					return '';
				}
			},
		},
		// 子组件
		components: {
			XHeader,
			Datetime,
			Swipeout,
			SwipeoutItem,
			SwipeoutButton,
			PopupPicker,
			Group
		}
	}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
        .rememberOilRecord {
			.myScroller{
	            top: .8rem;
	        }
			min-height:100%;
			background:#fff;
			.noRecord{
				position:absolute;
				top:0;
				left:0;
				bottom:0;
				right:0;
				margin:auto;
				img{
					width:2.63rem;
					height:2.02rem;
				}
				p{
					font-size:.3rem;
					color:#888;
				}
			}
			.oilAllRecord{
				.oilYearRecord{
					height:1.2rem;
					background:#f5f5f5;
					display:flex;
					align-items:center;
					justify-content:space-between;
					.oilYearLeft{
						text-align:left;
						margin-left:.32rem;
						height:100%;
						display:flex;
						flex-flow:column;
						justify-content:center;
						p:nth-of-type(1){
							font-size:.3rem;
							color:#222;
						}
						p:nth-of-type(2){
							font-size:.24rem;
							color:#888;
						}
					}
					.oilYearRight{
						height:100%;
						display:flex;
						flex-flow:column;
						justify-content:center;
						padding:0 .46rem;
						img{
							width:.4rem;
							height:.4rem;
						}
					}
				}
				.dateDetailRecord{
					height:1.2rem;
					display:flex;
					align-items:center;
					justify-content:space-between;
					.detailRecordLeft{
						p:nth-of-type(1){
							font-size:.3rem;
							color:#222;
						}
						p:nth-of-type(2){
							font-size:.24rem;
							color:#888;
							display:flex;
							align-items:center;
							img{
								width:.3rem;
								height:.3rem;
								margin-right:.07rem;
							}
						}
					}
					.detailRecordRight{
						font-size:.36rem;
						color:#E39B00;
					}
					.contents{
						width:6.75rem;
						display:flex;
						align-items:center;
						justify-content:space-between;
						height:1.2rem;
						margin:0 auto;
						.borderBFu(#e5e5e5);
					}
				}
			}
        }
		.delPng{
			width:.36rem;
			height:.36rem;
		}
</style>
